<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>数学拼图游戏</title>
  <style>
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: #f0f9ff;
      margin: 0;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      box-sizing: border-box;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
    }
    .game-container {
      max-width: 800px;
      width: 100%;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-top: 20px;
      box-sizing: border-box;
      overflow-x: hidden;
    }
    h1 {
      color: #3b82f6;
      text-align: center;
      font-size: 1.8rem;
    }
    .puzzle-area {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 20px 0;
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
    .number-card {
      width: 60px;
      height: 60px;
      background-color: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
    }
    .operator-card {
      width: 60px;
      height: 60px;
      background-color: #f59e0b;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
    }
    .equation-display {
      height: 60px;
      background-color: #f3f4f6;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin: 20px 0;
      padding: 0 20px;
      overflow-x: auto;
      white-space: nowrap;
      width: 100%;
      box-sizing: border-box;
      min-height: 60px;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
    }
    button {
      background-color: #3b82f6;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background-color: #2563eb;
    }
    .message {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
      color: #10b981;
      font-weight: bold;
    }
    
    /* 响应式设计 */
    @media (max-width: 600px) {
      body {
        padding: 10px;
      }
      .game-container {
        padding: 15px;
        margin-top: 10px;
        width: calc(100% - 20px);
      }
      h1 {
        font-size: 1.5rem;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .number-card, .operator-card {
        width: 45px;
        height: 45px;
        font-size: 18px;
      }
      .equation-display {
        height: 50px;
        font-size: 18px;
        margin: 15px 0;
      }
      .controls {
        flex-direction: column;
        width: 100%;
        gap: 5px;
      }
      button {
        width: 100%;
        margin-bottom: 5px;
        padding: 12px 10px;
        font-size: 16px;
      }
      .message {
        font-size: 16px;
        margin-top: 15px;
      }
      p {
        font-size: 14px;
        margin: 10px 0;
      }
      .puzzle-area {
        gap: 8px;
      }
    }
    
    @media (max-width: 400px) {
      .number-card, .operator-card {
        width: 38px;
        height: 38px;
        font-size: 15px;
      }
      .puzzle-area {
        gap: 6px;
      }
      h1 {
        font-size: 1.3rem;
      }
      .equation-display {
        font-size: 16px;
      }
      .game-container {
        padding: 12px;
        width: calc(100% - 20px);
      }
    }
    
    @media (max-width: 320px) {
      .number-card, .operator-card {
        width: 34px;
        height: 34px;
        font-size: 14px;
      }
      .puzzle-area {
        gap: 5px;
      }
      .game-container {
        padding: 10px;
      }
      body {
        padding: 5px;
      }
    }
  </style>
</head>
<body>
  <h1>数学拼图游戏</h1>
  
  <div class="game-container">
    <p>拖动数字和运算符，组成等式来解决数学难题！</p>
    
    <div class="equation-display" id="equation">请组成一个等式</div>
    
    <div class="puzzle-area">
      <div class="number-card" draggable="true" data-value="1">1</div>
      <div class="number-card" draggable="true" data-value="2">2</div>
      <div class="number-card" draggable="true" data-value="3">3</div>
      <div class="number-card" draggable="true" data-value="4">4</div>
      <div class="number-card" draggable="true" data-value="5">5</div>
      <div class="operator-card" draggable="true" data-value="+">+</div>
      <div class="operator-card" draggable="true" data-value="-">-</div>
      <div class="operator-card" draggable="true" data-value="×">×</div>
      <div class="operator-card" draggable="true" data-value="=">=</div>
    </div>
    
    <div class="controls">
      <button id="check-btn">检查等式</button>
      <button id="clear-btn">清除</button>
    </div>
    
    <div class="message" id="message"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const equationDisplay = document.getElementById('equation');
      const checkBtn = document.getElementById('check-btn');
      const clearBtn = document.getElementById('clear-btn');
      const messageDisplay = document.getElementById('message');
      
      let currentEquation = '';
      
      // 检测是否为移动设备
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      
      // 为移动设备添加触摸反馈
      if (isMobile) {
        document.body.classList.add('mobile-device');
      }
      
      // 拖拽功能简化版
      const cards = document.querySelectorAll('.number-card, .operator-card');
      cards.forEach(card => {
        card.addEventListener('click', function() {
          const value = this.getAttribute('data-value');
          currentEquation += value;
          equationDisplay.textContent = currentEquation;
          
          // 添加触摸反馈
          this.style.opacity = '0.7';
          setTimeout(() => {
            this.style.opacity = '1';
          }, 150);
        });
      });
      
      // 检查等式
      checkBtn.addEventListener('click', function() {
        if (currentEquation.includes('=')) {
          try {
            const parts = currentEquation.split('=');
            if (parts.length !== 2) {
              messageDisplay.textContent = '等式格式不正确';
              messageDisplay.style.color = '#ef4444';
              return;
            }
            
            let leftSide = parts[0].replace('×', '*');
            let rightSide = parts[1].replace('×', '*');
            
            const leftResult = eval(leftSide);
            const rightResult = eval(rightSide);
            
            if (leftResult === rightResult) {
              messageDisplay.textContent = '恭喜！等式正确！';
              messageDisplay.style.color = '#10b981';
              
              // 通知父窗口游戏完成
              if (window.parent && window.parent.postMessage) {
                window.parent.postMessage({ type: 'gameCompleted', game: 'math-puzzle' }, '*');
              }
            } else {
              messageDisplay.textContent = '等式不正确，请重试';
              messageDisplay.style.color = '#ef4444';
            }
          } catch (e) {
            messageDisplay.textContent = '等式格式不正确';
            messageDisplay.style.color = '#ef4444';
          }
        } else {
          messageDisplay.textContent = '请输入一个完整的等式';
          messageDisplay.style.color = '#ef4444';
        }
      });
      
      // 清除等式
      clearBtn.addEventListener('click', function() {
        currentEquation = '';
        equationDisplay.textContent = '请组成一个等式';
        messageDisplay.textContent = '';
      });
    });
  </script>
</body>
</html>